<template>
  <div id='tmpl'>
    <!-- 1.0商品分类 -->
    <div id="lists">
      <ul v-bind="{style:'width:'+ulWidth+'px'}">
        <li @click="getlist(0)">全部</li>
        <li v-for="item in cates" @click="getlist(item.id)">{{item.title}}</li>
      </ul>
    </div>
    <!-- 2.0商品图片list -->
    <div id="imglist">
      <ul>
        <li v-for="item in list">
          <router-link v-bind="{to:'/photo/photoinfo/'+item.id}">
            <img v-lazy='item.img_url'>
            <div id='desc'>
              <h5 v-text="item.title"></h5>
              <p v-text="item.zhaiyao"></p>
            </div>
          </router-link> 
        </li>
      </ul>
    </div>
  </div>
</template>
<script>
import common from "../../common/common.js";
import {Toast} from "mint-ui";
  export default {
    data(){
      return {
        cates:[],
        list:[],
        ulWidth:320,
      }
    },
    created(){
      this.getcates();
      var all=0;
      this.getlist(all);
    },
    methods:{
      getcates(){
          var url=common.apidomain+'/api/getimgcategory';
          this.$http.get(url).then(function(res){
            var data=res.body;
            if(data.status!=0){
              Toast(data.message);
              return
            }
            this.cates=data.message;
            var w=62;
            var count=res.body.message.length+1;
            this.ulWidth=w*count;
          })
      },
      getlist(id){
        id=id||0;
        var url=common.apidomain+'/api/getimages/'+id;
        this.$http.get(url).then(function(res){
          var data=res.body;
          if(data.status!=0){
            Toast(data.message);
            return;
          }
          this.list=data.message;
        })
      }
    }
  }
</script>
<style scoped>
  #lists {
    width:375px;
    max-width: 375px;
    overflow: auto;
  }
  #lists ul {
    margin:0px;
    padding-left:10px;
  }
  #lists li {
    cursor:pointer;
    height:30px;
    list-style: none;
    display: inline-block;;
    color: #0094ff;
    font-size: 14px;
    padding-left:6px;
  }
  #imglist ul {
    padding-left: 0px;
  }
  #imglist li{
    list-style:none;
    position: relative ;
  }
  #imglist img{
    width:100%;
    height: 400px;
  }

  #desc{
    width: 100%;
    background-color: rgba(0,0,0,0.2);
    position: absolute;
    bottom: 2px;
    left: 0px;
  }
  #desc h5{
  color: #ffffff;
  font-weight: bold;
}
  #desc p{
    color:#fff;
  }
    image[lazy=loading] {
    width: 40px;
    height: 300px;
    margin: auto;
  }
</style>